<template>
		<uni-calendar :showMonth="true" :selected="selected" @change="change"
			@monthSwitch="monthSwitch" >
			<template #footer>
				<view class="color_state">
					<view class="item">
						已打卡<view class="point first"></view>
					</view>
					<view class="item">
						已补卡<view class="point fill"></view>
					</view>
					<view class="item">
						缺卡<view class="point lose"></view>
					</view>
					<view class="item">
						暂停<view class="point pause"></view>
					</view>
				</view>
			</template>
		</uni-calendar>
</template>
<script setup>
	import {
		nextTick,
		reactive,
		ref,
		watchEffect
	} from 'vue'
	import moment from 'moment';
	import {
		onShow
	} from '@dcloudio/uni-app'
	
	import {
		DutyClockState
	} from '@/enum/GlobalEnum.js'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const props = defineProps({
		data:{
			type:Object
		},
		targetYear:{
			type:Number
		},
		targetMonth:{
			type:Number
		},
		dutyWeek:{
			type:Number
		},
		dutyInfo:{
			type:Object
		}
	})
	const emits = defineEmits(["toggleDate","clickDateByChild","clockDataEmit"])

	const selected = ref([])
	const extraInfo = ref(null)
	
	const {
		primary_text_color,
		primary_hot_color
	} = dynamicStyle_store.dormitoryStyle

	/**
	 * 获取任意时间
	 */
	const getDate = (date, AddDayCount = 0) => {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}

	const change = (e) => {
		console.log('change 返回:', e)
		extraInfo.value = e.extraInfo
		emits("clickDateByChild",e.extraInfo)
	}
	const monthSwitch = (e) => {
		console.log('monthSwitchs 返回:', e)
		emits("toggleDate",{valueYM:e,extraInfo:extraInfo.value})
	}
	const verifyTargetClockIsPause =(info,time)=>{
		const {isPauseDuty,pauseDates} = props.dutyInfo
		if(pauseDates?.data && Array.isArray(pauseDates?.data)){
			const _data = pauseDates.data
			for(let i=0;i<_data.length;i++){
				let {startTime,endTime} = _data[i]
				const timeFormat = 'YYYY-MM-DD'
				if(!endTime) {
					endTime = moment().add(1,'days').format(timeFormat)
				}else{
					endTime = moment(endTime).add(1,'days').format(timeFormat)
				}
				startTime = moment(startTime).subtract(1,'days').format(timeFormat)
				if(moment(time).isBetween(startTime,endTime)){
					info = 5
				}
			}
		}
		return info
	}
	watchEffect(()=>{
		const nowMonth=Number(moment().format("M"))
		const nowDay = moment().format("YYYY-MM-DD")
		const tmpArr = []
		const targetMonthDayLen = moment(`${props.targetYear}-${props.targetMonth}`,"YYYY-MM").daysInMonth()
		const clockList = props.data?.clockList || []
		
		
		for(let i=1;i<=targetMonthDayLen;i++){
			const tmpDay = moment(`${props.targetYear}-${props.targetMonth}-${i}`).format("YYYY-MM-DD")
			const tmpWeek = moment(tmpDay).weekday() || 7
			if(tmpWeek === props.dutyWeek){
				//小于今天且该值日星期下默认缺卡类型
				if(moment(tmpDay).isAfter(nowDay)){
					break
				}else if(
					!moment(tmpDay).isAfter(props.dutyInfo?.createAt) &&
					moment().format("YYYY-MM-DD") !== tmpDay
				){
					//不能在值日创建时间之前
					continue
				}
				const noDutysByWeekType=props.dutyInfo?.noDutysByWeekType || []
				let date=getDate((moment(tmpDay))).fullDate
				let info = tmpDay===nowDay ? DutyClockState.GONING : (noDutysByWeekType.includes(date) ? 4 : DutyClockState.LOSE)
				props.data?.clockList?.forEach(item=>{
					const date=getDate(moment(item.clockTime).utcOffset(8)).fullDate
					if(tmpDay === date){
						//有补打卡记录，就修改为新的打卡类型
						console.log(date,'补卡记录',item)
						info = item.clockType
					}
				})
				tmpArr.push({
					date,
					info:verifyTargetClockIsPause(info,tmpDay)
				})
			}
		}
		emits("clockDataEmit",tmpArr)
		selected.value = [...tmpArr]	
	})
</script>
<style lang="less">
	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}
	.color_state{
		display: flex;
		justify-content: center;
		color: v-bind(primary_text_color);
		font-size: 20rpx;
		.item{
			margin: 0 20rpx 10rpx 20rpx;
			display: flex;
			align-items: center;
			.point{
				width: 18rpx;
				height: 18rpx;
				border-radius: 18rpx;
				margin-left: 10rpx;
			}
			.lose{
				background-color: v-bind(primary_hot_color);
			}
			.pause{
				background-color: v-bind(primary_text_color);
			}
			.first{
				background-color: #A7E591;
			}
			.fill{
				background-color: #EEC652;
			}
		}
	}
</style>
